import React from 'react'
import { Modal, Toast } from 'antd-mobile';
import img1 from './../../assets/images/txt-1.png';
import img2 from './../../assets/images/lb.png';
import img3 from './../../assets/images/photograph.png';
import img4 from './../../assets/images/completed.png';
import { userinfo } from './../../utils/apis'
import { getListInfo, getmoreInfo, register } from './../../utils/apis'
import Init from './../../components/init'
import './index.scss';
type Props = {
    match: any,
    history: any,
}
export default class Home extends React.Component<Props>{
    constructor(props: any) {
        super(props)
    }
    state = {
        id: '',
        corpname: "",
        gramflag: 0,
        infoflag: 0,
        signflag: 0,
        intetime: "",
        positionname: "",
        sex: "",
        username: "",
        resumeid: '',
        isLoading: true,
        isError: false,
        show: false,
        show1: false,
        positionid: '',
        inteaddress: '',
        phone: '',
        companyname: '',
        inteid: '',
        list: [],
        showModel:false,
        noInfo:false

    }
    componentDidMount() {
        
        const that = this
        const { match: { params: { id, phone } } } = that.props
        if (that.props.match.params.phone.length > 2) {
            that.setState({
                id: parseInt(id),
                phone
            }, () => {
                that.getInfo()
            })
        } else {
            that.setState({
                id: parseInt(id),
            }, () => {
                that.getData()
            })
        }
    }
    //根据  inteid去查询登记，面试状态 
    getmoreInfo() {
        const that = this
        const { inteid } = this.state
        getmoreInfo({ inteid }).then(res => {
            const { returnCode, result } = res
            if (returnCode == 'AAAAAAA') {
                this.setState({
                    intetime: result.intetime,
                    inteaddress: result.inteaddress,
                    gramflag: result.gramflag,
                    infoflag: result.infoflag,
                    signflag: result.signflag,
                    positionname: result.positionname,
                })
            }
            that.setState({ isLoading: false })
        }).catch(err => {
            that.setState({ isError: true })
            if (err.response) {
                console.log(err.response.status, '111');
                console.log(err.response.headers);
            } else if (err.request) {
                console.log(err.request);
            } else {
                console.log('err', err.message);
            }
        })
    }
    getInfo() {
        const that = this
        const { id, phone } = this.state
        getListInfo({ companyid: id, phone }).then(res => {
            console.log(res, '获取数据');

            const { returnCode, result } = res
            if (returnCode == 'AAAAAAA') {
              

                that.setState({
                    corpname: res.result.companyname,
                    username: res.result.name,
                    list: res.result.list,
                    inteid: res.result.list[0].inteid,
                    positionid:res.result.list[0].positionid,
                    resumeid:res.result.list[0].resumeid,
                    sex:res.result.sex
                })
                that.getmoreInfo()
            }
            if(returnCode==='0000002'){
                that.setState({
                    noInfo:true
                })
            }
            that.setState({ isLoading: false })
        }).catch(err => {
            that.setState({ isError: true })
            if (err.response) {
                console.log(err.response.status, '111');
                console.log(err.response.headers);
            } else if (err.request) {
                console.log(err.request);
            } else {
                console.log('err', err.message);
            }
        })
    }

    getData() {
        const that = this
        const { id } = that.state

        userinfo({ inteid: id }).then(res => {
            console.log(res, '获取数据');

            const { returnCode, result } = res
            if (returnCode == 'AAAAAAA') {
                const { result: { corpname, gramflag, infoflag, intetime, positionname, sex, username, resumeid, positionid, inteaddress } } = res
                let show = gramflag == 1 && infoflag == 1 ? true : false
                that.setState({
                    corpname, gramflag, infoflag, intetime, positionname, sex, username, show, resumeid, positionid, inteaddress,
                })
            }
            if(returnCode==='0000002'){
                that.setState({
                    noInfo:true
                })
            }
            that.setState({ isLoading: false })
        }).catch(err => {
            that.setState({ isError: true })
            if (err.response) {
                console.log(err.response.status, '111');
                console.log(err.response.headers);
            } else if (err.request) {
                console.log(err.request);
            } else {
                console.log('err', err.message);
            }
        })
    }
    openModel(){
        this.setState({
            showModel:true
        })
    }
    onCloseModel(){
        this.setState({
            showModel:false
        })
    }

    jumpto(name) {
        const { history } = this.props
        const { id, sex, username, positionname, resumeid, positionid,phone, inteid} = this.state
        // 1 扫码进入情况
        if(phone.length>2){
            let info = '',
            v = '',
            pid = ''
        if (name == 'edit') {
            v = inteid
            info = '/' + encodeURIComponent(sex + ',' + username + ',' + positionname)
        } else if (name == 'enneagramtest') {
            v = inteid
            info = '/' + resumeid
            pid = '/' + positionid
        } else {
            v = resumeid + '/' + positionid
        }

        history.push('/' + name + '/' + v + info + pid);
        }else{
            // 短信验证码进入
            let info = '',
            v = '',
            pid = ''
        if (name == 'edit') {
            v = id
            info = '/' + encodeURIComponent(sex + ',' + username + ',' + positionname)
        } else if (name == 'enneagramtest') {
            v = id
            info = '/' + resumeid
            pid = '/' + positionid
        } else {
            v = resumeid + '/' + positionid
        }

        history.push('/' + name + '/' + v + info + pid);
        }
        
    }

    onClose(name) {
        this.setState({ [name]: false })
    }
    change=(item)=>{
        const that = this
       let inteid=item
        getmoreInfo({ inteid }).then(res => {
            const { returnCode, result } = res
            if (returnCode == 'AAAAAAA') {
                this.setState({
                    intetime: result.intetime,
                    inteaddress: result.inteaddress,
                    gramflag: result.gramflag,
                    infoflag: result.infoflag,
                    signflag: result.signflag,
                    positionname: result.positionname,
                    showModel:false,
                    positionid:result.positionid,
                    resumeid:result.resumeid,
                    inteid:result.inteid
                })
            }
            that.setState({ isLoading: false })
        }).catch(err => {
            that.setState({ isError: true })
            if (err.response) {
                console.log(err.response.status, '111');
                console.log(err.response.headers);
            } else if (err.request) {
                console.log(err.request);
            } else {
                console.log('err', err.message);
            }
        })
    }

    sign() {
        const that = this
        const { inteid } = that.state

        register({ inteid }).then(res => {
            console.log(res, '获取数据');

            const { returnCode, result } = res
            if (returnCode == 'AAAAAAA') {
                Toast.success('签到成功')
                that.setState({
                    signflag: 1
                })

            }
            that.setState({ isLoading: false })
        }).catch(err => {
            that.setState({ isError: true })
            if (err.response) {
                console.log(err.response.status, '111');
                console.log(err.response.headers);
            } else if (err.request) {
                console.log(err.request);
            } else {
                console.log('err', err.message);
            }
        })
    }

    render() {

        const {noInfo, showModel,signflag, gramflag, infoflag, corpname, intetime, username, sex, positionname, isError, isLoading, show, show1, phone, inteaddress, list } = this.state
        console.log(sex)
        return (
            <>
                {isError ? <div>加载出错</div> : <>
                    {isLoading ? <Init></Init> :
                        <div className="main">
                            <img className="logo" src={img1} />
                        {!noInfo &&  <div className="interv">
                                <div className="interv-content">
                                    <img className="interv-img" src={img2}></img>
                                    <div className="flex1">
                                        <div className="interv-corp ellipsis">{corpname}</div>
                                        <div className="interv-name">欢迎{username}
                                            {sex == '女' && <span>女士</span>}
                                            {sex == '男' || sex == ''  && <span>先生</span>}
                                        </div>
                                        {!phone && <div className="interv-post ellipsis">应聘职位：{positionname}</div>}
                                        <div className="interv-time">应聘时间：{intetime}</div>
                                        <div className="interv-post ellipsis">应聘地点：{inteaddress}</div>
                                        {phone.length>2 &&<div className="icon">
                                          <div className="interv-post ellipsis">应聘职位：{positionname}</div>
                                            {list.length>1 && <div  className="icon iconfont  iconqiehuan" onClick={()=>this.openModel()}><span>&nbsp;&nbsp;选择</span></div>}
                                        </div>}
                                    </div>
                                </div>
                            </div> }    
                            {/* 搜索内容进行搜索 */}
                            <img className="photograph" src={img3} />
                          {!noInfo &&  <div>
                                 <div className="tips">为了您的面试过程顺利进行，请您如实填写以下面试信息和九型人格测试！</div>
                            {phone.length < 2 && <div className="btnboxs">
                                <div className={infoflag == 1 ? "completed btnl" : "btnl"}>
                                    <button className="hbtn" disabled={infoflag == 1} onClick={this.jumpto.bind(this, 'edit')}>面试信息预登记</button>
                                    {infoflag == 1 && <img className="completed-img" src={img4} onClick={() => { this.setState({ show1: true }) }} />}
                                </div>
                                <div className="space"></div>
                                <div className={gramflag == 1 ? "completed btnl" : "btnl"}>
                                    <button className="hbtn" disabled={gramflag == 1} onClick={this.jumpto.bind(this, 'enneagramtest')}>九型人格测试</button>
                                    {gramflag == 1 && <img className="completed-img" src={img4} onClick={this.jumpto.bind(this, 'result')} />}
                                </div>
                            </div>}
                            {phone.length >= 2 && <div className="btnboxs">
                                <div className={infoflag == 1 ? "completed btnl" : "btnl"}>
                                    <button className="hbtn2" disabled={infoflag == 1} onClick={this.jumpto.bind(this, 'edit')}>面试信息预登记</button>
                                    {infoflag == 1 && <img className="completed-img" src={img4} onClick={() => { this.setState({ show1: true }) }} />}
                                </div>
                                <div className={gramflag == 1 ? "completed btnl" : "btnl"}>
                                    <button className="hbtn2" disabled={gramflag == 1} onClick={this.jumpto.bind(this, 'enneagramtest')}>九型人格测试</button>
                                    {gramflag == 1 && <img className="completed-img" src={img4} onClick={this.jumpto.bind(this, 'result')} />}
                                </div>
                                <div className="completed btnl" onClick={() => { this.sign() }}>
                                    <button className="hbtn3" disabled={signflag == 1} >{signflag == 1 ? '已签到' : '签到'}</button>
                                </div>
                            </div>}
                            </div>
                           } 

                         {showModel && <div className="model">
                                <div className="model-center">
                                    <div className="text">
                                        {list.map((item) =>
                                            <div className="ceil" key={item.positionid} onClick={()=>this.change(item.inteid)} >
                                                {item.positionname}
                                            </div>
                                        )}
                                    </div>
                                    {/* <div className="iconfont iconquxiao1 icon" onClick={()=>this.onCloseModel()}></div> */}
                                </div>
                            </div>}   


                            {/* 面试信息填写完成提示 S */}
                            <Modal
                                visible={show}
                                transparent
                                maskClosable={false}
                                onClose={() => this.onClose('show')}
                                title=""
                                footer={[{ text: '知道了', onPress: () => this.onClose('show') }]}>
                                <div className='modaltips'>您的面试信息表已经填写完毕！<br />祝您面试愉快！</div>
                            </Modal>
                            {/* 面试信息填写完成提示 E */}


                            {/* 已提交简历信息 S */}
                            <Modal
                                visible={show1}
                                transparent
                                maskClosable={false}
                                onClose={() => this.onClose('show1')}
                                title=""
                                footer={[{ text: '知道了', onPress: () => this.onClose('show1') }]}>
                                <div className='modaltips'>提交之后为了您的隐私安全<br />简历将不可查看</div>
                            </Modal>
                            {/* 已提交简历信息 E */}

                        </div>
                    }
                </>}
            </>
        );
    }
}
